<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-01 11:10:39
 * @LastEditors: Please set LastEditors
 -->
<template>
	<view class="product-center-page">
		<!-- banner图 -->
		<view class="banner" :style="{height:(tabActive==1?'350upx':'310upx')}">
			<image src="../static/images/product-banner1.png" mode="scaleToFill" lazy-load="false">
			</image>
		</view>
		<!-- tab/tag切换 -->
		<view class="product-top" :style="{top:(tabActive==1?'95upx':'16upx')}">
			<view class="tab">
				<view :class="['tab-item',tabActive==1 ? 'tab-active' : '']" :data-tag="1" @click="chooseTab">贷款</view>
				<view class="line"></view>
				<view :class="['tab-item',tabActive==2 ? 'tab-active' : '']" :data-tag="2" @click="chooseTab">信用卡</view>
			</view>
			<view class="tag" :style="{height:(tabActive==1?'190upx':'196upx')}" v-if="tabActive==1">
				<view :class="['tag-item',tagActive==item.tagId ? 'tag-active' :'']" :data-id="item.tagId" @click="chooseTag" v-for="(item,index) in tagList" :key="index">
					<view class="tag-imgbox">
						<image class="tag-img" :src="item.bg"></image>
					</view>
					<view class="tag-text">{{item.tagName}}</view>
				</view>
			</view>

			<view class="credit-card" v-else>
				<image src="../static/images/credit-card-bg.png" mode="scaleToFill" lazy-load="false">
				</image>
			</view>
		</view>
		<view class="product-content">
			<view class="tips" v-if="tabActive!=2">
				<view class="vertical-line"></view>
				<view v-for="(item,index) in tagList" :key="index">
					<view v-if="item.tagId==tagActive">{{item.tagName}}</view>
				</view>
			</view>
			<view class="content">
				<view class="tab-content" v-if="tabActive==1">
					<Product :productList="productList" />
				</view>
				<view class="tab-content" v-if="tabActive==2">
					<Product :productList="productList" :tagActive="tagActive" type="creditCard" />
				</view>
			</view>
		</view>
		<uni-load-more v-if="productList.length>=8" :loadingType="loadingType"></uni-load-more>
		<view style="height: 100upx;"></view>
	</view>
</template>
<script>
	import Swiper from "@/components/swiper/swiper.vue";
	import Product from "@/components/product/productnew.vue";
	import InterServer from "@/common/config/server";
	import noData from "@/components/noData/noData";
	import {
		localStorageSyncServer
	} from "@/common/js/common";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import Vue from "vue";
	import {
		setTimeout
	} from 'timers';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			Swiper,
			Product,
			noData,
			uniLoadMore
		},
		data() {
			return {
				imgUrls: [
					"../static/images/product-banner1.png",
					"../static/images/product-banner2.png"
				],
				tagList: [{
						tagName: "银行贷款",
						tagId: 1,
						bg: "../static/img/j_icon0.png"
					},
					{
						tagName: "抵押贷款",
						tagId: 2,
						bg: "../static/img/j_icon1.png"
					},
					{
						tagName: "信用贷款",
						tagId: 3,
						bg: "../static/img/j_icon2.png"
					},
					{
						tagName: "极速贷款",
						tagId: 4,
						bg: "../static/img/j_icon3.png"
					}
				],
				tabList: [{
						tabName: "贷款",
						tabId: 1
					},
					{
						tabName: "信用卡",
						tabId: 2
					}
				],
				productList: [],
				loanType: 1, //默认选中
				pageNum: 0, //当前页数
				pageSize: 10, //每页显示几条
				totalPage: 0, //总共页数
				tagActive: 1, //标签切换
				tabActive: 1, //Tab按钮切换
				pageNumber: 0,
				loadingType: 0, //加载类型0（loading前），1（loading中），2（没有更多了）
			};
		},
		onShow() {
			let _that = this
			setTimeout(function() {
				_that.initLoading() //信息加载
			})
			// #ifdef H5
			document.title = `产品中心`
			// #endif
		},
		computed: {
			...mapState([
				'productId'
			])
		},
		onHide() {
			uni.removeStorageSync("productId");
			this.pageNum = 0
			this.productList.length = 0
			this.loanType = 1
			this.tagActive = 1 //标签切换
			this.tabActive = 1 //Tab按钮切换
		},
		//上拉加载
		onReachBottom() {
			this.pageNum = this.pageNum + 1
			if (this.pageNumber + 1 < this.totalPage) {
				this.loadingType = 1
				this.getLoanAll() //获取顾问列表
			} else {
				this.loadingType = 2
			}
		},
		methods: {
			//获取所有贷款信息
			getLoanAll() {
				Vue.showCustomLoading();
				InterServer.getLoanAll({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					loanType: this.loanType
				}).then(res => {
					uni.hideLoading();
					this.productList = this.productList.concat(res.data.dataList);
					this.totalPage = res.data.totalPage;
					this.pageNumber = res.data.pageNumber;
				});
			},
			//信息加载
			initLoading() {
				let _that = this
				if (_that.productId) {
					_that.loanType = _that.productId === 6 ? 0 : _that.productId
					_that.tabActive = _that.productId == 6 ? 2 : 1
					_that.tagActive = _that.productId != 6 ? _that.productId : 1
				}
				console.log(_that.tagActive)
				if (this.tabActive == 2) {
					this.loanType = 0;
				}
				this.productList.length = 0;
				this.pageNum = 0;
				_that.getLoanAll(); //获取贷款信息
			},
			//tab按钮切换
			chooseTab(e) {
				this.tabActive = e.currentTarget.dataset.tag;
				if (this.tabActive == 2) {
					this.loanType = 0;
				} else {
					this.loanType = 1;
				}
				this.productList.length = 0;
				this.pageNum = 0;
				this.getLoanAll(); //获取所有贷款信息
			},
			//tag切换
			chooseTag(e) {
				this.tagActive = e.currentTarget.dataset.id;
				this.loanType = e.currentTarget.dataset.id;
				this.productList.length = 0;
				this.pageNum = 0;
				this.getLoanAll(); //获取所有贷款信息
			},
			//页面跳转
			navigateUrl() {
				let url = `./consultantDetails`;
				Vue.customNavigateTo(url);
			}
		}
	};
</script>
<style lang="less" scoped>
	.product-center-page {
		.banner {
			width: 100%;
			height: 350upx;

			image {
				width: 100%;
				height: 300upx;
			}
		}

		.product-top {
			width: 703upx;
			min-height: 196upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 3upx 6upx rgba(0, 0, 0, 0.16);
			border-radius: 10upx;
			position: absolute;
			left: 50%;
			margin-left: -351upx;

			.tab {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12upx;

				&-item {
					width: 340upx;
					height: 90upx;
					line-height: 90upx;
					text-align: center;
					font-size: 28upx;
				}

				&-active {
					border-bottom: 6upx solid rgba(228, 101, 27, 1);
					;
					color: #1b65fa;
				}

				.line {
					width: 2upx;
					height: 35upx;
					background: #f5f5f5;
				}
			}

			.credit-card {
				width: 706upx;
				height: 176upx;
				position: absolute;
				top: 115upx;
				margin-bottom: 40upx;

				image {
					width: 100%;
					height: 176upx;
					border-radius: 60upx;
				}
			}

			.tag {
				display: flex;
				align-items: center;
				font-size: 26upx;
				background: #ffffff;
				justify-content: space-between;
				margin-top: 0upx;
				padding: 0 20upx;

				&-item {
					width: 144upx;
					height: 102upx;
					text-align: center;
					line-height: 102upx;
					color: #777777;
					border-radius: 6upx;
					margin-right: 20upx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					font-size: 28upx;
					font-family: PingFang-Semibold;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}
				&-imgbox{
					width:81upx;
					height:82upx;
					background:linear-gradient(320deg,rgba(1,109,249,1) 0%,rgba(49,176,255,1) 100%);
					box-shadow:0upx 1upx 1upx rgba(0,0,0,0.29);
					border-radius:10upx;
					margin: 0 auto;
				}
				&-img{
					width:50upx;
					height:50upx;
					margin: 15upx;
				}
				&-text{
					line-height: 50upx;
					color:rgba(51,51,51,1);
					font-weight:600;
				}
			}
		}

		.product-content {
			margin-top: 40upx;

			.tips {
				width: 702upx;
				height: 42upx;
				line-height: 42upx;
				background: rgba(239, 239, 239, 1);
				margin: 20upx auto;
				font-size: 30upx;
				font-family: PingFang-Semibold;
				font-weight: bold;
				line-height: 29upx;
				color: rgba(51, 51, 51, 1);
				display: flex;
				align-items: center;

				.vertical-line {
					width: 20upx;
					height: 22upx;
					background: rgba(0, 100, 255, 1);
					margin: 0 12upx 0 7upx;
				}
			}
		}


	}
</style>
